﻿@using NB.MGJ.Model;
@{
    Layout = null;
    Origins_Templet T = ViewBag.Templete as Origins_Templet;
}
@*溯源节点版本库-修改*@
<!DOCTYPE html>

<link href="~/Content/Manger/tabletree4j.css" rel="stylesheet" />
<script src="~/Scripts/tableTree/TableTree4J.js"></script>
<link href="~/Scripts/Bootstrap/css/bootstrap-datepicker3.min.css" rel="stylesheet" />
<script src="~/Scripts/Bootstrap/js/bootstrap-datepicker.js"></script>

<link href="~/Content/TraceSource/AddOriginsTemplet_P.css" rel="stylesheet" />

<script src="~/Scripts/MGJJS/OriginsTemplet/OriginsTemplet.js"></script>


<div>

    <!-- Nav tabs -->
    <ul class="nav nav-tabs" id="myTab">
        <li class="active">
            <a href="#Template_form" id="menu__" data-toggle="tab" onclick="TempletAOE.CutButtonMenu()">
                溯源节点目录111
            </a>
        </li>
        <li>
            <a href="#config" id="config_" data-toggle="" onclick="TempletAOE.CutButtonInfo('edit')">
                溯源节点配置
            </a>
        </li>
    </ul>

    <!-- Tab panes -->
    <div id="myTabContent" class="tab-content margin-top-20">
        <form id="Template_form" class="tab-pane fade in active">
            <div id="menu_">
                <div role="tabpanel" class="tab-pane active" id="basicInfo">
                    <div style="display:flex">
                        <div id="gridTreeDiv" class="col-xs-6 col-sm-6 col-md-6 col-lg-6"></div>
                        <div id="menu_right" class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
                            @*取值的隐藏input*@
                            <input type="hidden" name="TempletId" value="@T.TempletId">
                            <input type="hidden" name="ClassifyId" value="@T.ClassifyId" />
                            <div class="row">
                                <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 text-right font-size-14">节点目录:</div>
                                <div class="col-xs-9 col-sm-9 col-md-9 col-lg-9">
                                    <input class="form-control" type="text" id="ClassifyName" value="@T.ClassifyName" disabled>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 text-right font-size-14">模板名称:</div>
                                <div class="col-xs-9 col-sm-9 col-md-9 col-lg-9">
                                    <input class="form-control" type="text" name="Name" value="@T.Name">
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 text-right font-size-14">模板编号:</div>
                                <div class="col-xs-9 col-sm-9 col-md-9 col-lg-9">
                                    <input class="form-control" type="text" name="Code" value="@T.Code">
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 text-right font-size-14">备注:</div>
                                <div class="col-xs-9 col-sm-9 col-md-9 col-lg-9">
                                    <input class="form-control" type="text" name="Remark" value="@T.Remark">
                                </div>
                            </div>
                            <div class="text-right; ">

                                <button class="btn btn-success" style="float:right" type="button" onclick="TempletAOE.Ajax_SaveOriginsTemplet()">保存</button>

                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </form>

        <div class=" tab-pane fade" id="config">
            <div id="SourceNode" class="container-fluid">
                <div style=" max-height: 500px; overflow: hidden;" class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
                    <div id="SourceNodeLeft">
                        <h2 class="text-center green-500">溯源节点</h2>
                        <div class="padding-bottom-50">
                            <div id="SourceNodeLeft_">
                                <div class="SourceNodeLeftChild ">
                                    <div class="border-buttom padding-10 ">
                                        <ul class="margin-left-10 margin-right-10" id="NodeData" style="display:none;">
                                            <li class="border-buttom padding-bottom-10">
                                                <div class="border-buttom padding-bottom-10 ">
                                                    <span binding="{'text':'rownum'}"></span>
                                                    <span class="padding-right-20">节点名称:</span>
                                                    <span style="color:#999999" binding="{'text':'NodeName'}"></span>
                                                    <span class="fr">
                                                        <i class="glyphicon glyphicon-edit" binding="{'NodeId':'Id'}" onclick="NodeConfig.Ajax_EditNode(this)"></i>
                                                        <i class="glyphicon glyphicon-remove" binding="{'NodeId':'Id'}" onclick="NodeConfig.Ajax_DeleteNode(this)"></i>
                                                    </span>
                                                </div>
                                                <span class="padding-right-20">节点类型:</span>
                                                <span>
                                                    <a class="click_a color-999999">原料节点</a>
                                                    <a class="click_a active color-999999">录入限制</a>
                                                    <a class="click_a color-999999">多次</a>
                                                </span>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                            <footer style="position:absolute;bottom:10px;width:100%">
                                <a class="btn btn-success col-xs-5 col-sm-5 col-md-5 col-lg-5" onclick="NodeConfig.Ajax_AddNode()">添加节点</a>
                                <a class="btn btn-success col-xs-5 col-sm-5 col-md-5 col-lg-5" onclick="NodeConfig.Dialog_FromTemplet($('#FlowID').val())">从模板添加</a>
                            </footer>
                            <div style="clear:both"></div>
                        </div>
                    </div>
                </div>
                <div id="SourceNodeRight" class="col-xs-8 col-sm-8 col-md-8 col-lg-8 padding-bottom-50">
                    <form method="post" id="Node_form">
                        <input type="hidden" id="id" name="Id" value="0">
                        <input type="hidden" name="FlowID" value="@T.TempletId" id="FlowID">

                        <div id="myTabContent" class="tab-content">
                            @*<div class="tab-pane fade in active" id="home">*@
                            <div>
                                <div class="row form-group">
                                    <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2 text-right">节点名称:</div>
                                    <div class="col-xs-10 col-sm-10 col-md-10 col-lg-10">
                                        <input id="NodeName" class="form-control" name="NodeName" type="text" value="">
                                    </div>
                                </div>
                                <div class="row form-group">
                                    <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2 text-right">节点类型:</div>
                                    <div class="col-xs-10 col-sm-10 col-md-10 col-lg-10">
                                        <select class="form-control" name="Category" id="Category">
                                            <option value="">--请选择--</option>
                                            <option value="0">原料节点</option>
                                            <option value="1">关键节点 </option>
                                            <option value="2">其它</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="row form-group">
                                    <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2 text-right">录入限制:</div>
                                    <div class="col-xs-10 col-sm-10 col-md-10 col-lg-10">
                                        <div>
                                            <label class="NodeConfigLabel"><input type="radio" name="EnterTimes" value="0" />单次输入</label>
                                            <label class="NodeConfigLabel"><input type="radio" name="EnterTimes" value="1" />多次输入</label>
                                        </div>
                                        <p>选择单次输入将使单个产品批次仅允许录入一次该节点信息，通常使用在“播种”、“屠宰”、“进口”等仅发生一次节点上。</p>
                                    </div>
                                </div>
                                <div class="row form-group">
                                    <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2 text-right">H5控制:</div>
                                    <div class="col-xs-10 col-sm-10 col-md-10 col-lg-10">
                                        <div>
                                            <label class="NodeConfigLabel"><input type="radio" name="IsH5" value="1" />显示</label>
                                            <label class="NodeConfigLabel"><input type="radio" name="IsH5" value="0" />隐藏</label>
                                        </div>
                                        <p>该节点的溯源信息将默认在H5中显示</p>
                                    </div>
                                </div>
                                <div class="row form-group">
                                    <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2 text-right">修改权限:</div>
                                    <div class="col-xs-10 col-sm-10 col-md-10 col-lg-10">
                                        <div>
                                            <label class="NodeConfigLabel" style="width:100%"><input type="radio" name="Permission" value="0" />允许所有人修改</label>
                                            <label class="NodeConfigLabel" style="width:100%"><input type="radio" name="Permission" value="1" />只允许有权限的人修改</label>
                                        </div>
                                    </div>
                                </div>
                                <div class="row form-group" id="Modifier">
                                    <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2 text-right">修改人:</div>
                                    <div class="col-xs-10 col-sm-10 col-md-10 col-lg-10">
                                        <select class="form-control" id="UserSelect" name="PermissionPerson"></select>
                                    </div>
                                </div>


                                <div class="margin-top-10 padding-top-20 padding-bottom-20 form-group" style="border: 1px solid #f1f4f5;clear:both">
                                    <label class="col-xs-4 col-sm-4 col-md-4 col-lg-4 text-center AddContent">
                                        <i class="glyphicon glyphicon-pencil font-size-20" style="display:block"></i>
                                        增加文字
                                        <input type="checkbox" class="AddContentInp" name="DisplayChe" value="0" />
                                    </label>

                                    <label class="col-xs-4 col-sm-4 col-md-4 col-lg-4 text-center AddContent">
                                        <i class="glyphicon glyphicon-picture font-size-20" style="display:block"></i>
                                        增加图片
                                        <input type="checkbox" class="AddContentInp" name="DisplayChe" value="1" />
                                    </label>

                                    <label class="col-xs-4 col-sm-4 col-md-4 col-lg-4 text-center AddContent">
                                        <i class="glyphicon glyphicon-facetime-video font-size-20" style="display:block"></i>
                                        增加视频
                                        <input type="checkbox" class="AddContentInp" name="DisplayChe" value="2" />
                                    </label>
                                    <div style="clear:both"></div>
                                </div>

                                <input type="hidden" name="Display" id="Display" value="" />
                                <div style="position: absolute; bottom: 10px; width: 100%" class="text-right">
                                    <button class="btn btn-success" type="button" onclick="NodeConfig.NodeInfoIniti()">取消编辑</button>
                                    <button class="btn btn-success" type="button" onclick="NodeSave($('#FlowID').val())">保存节点</button>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>


<script>
    //溯源节点目录
    TempletAOE.Ajax_GetTableTree(1);

    $(function () {

        $.MGJ.NodeConfig.GetUserListByEid();
    });


    var GRIDTREESTYLEID
    $(document).on("click", ".GRIDTREESTYLE", function () {
        $(".GRIDTREESTYLE").css("background", "#FFFFFF")
        $(this).css("background", "rgb(207, 223, 243)")
        GRIDTREESTYLEID = $(this).parent().attr("id")



    })

    var GRIDTREESTYLEID
    $(document).on("click", ".GRIDTREESTYLE", function () {
        $(".GRIDTREESTYLE").css("background", "#FFFFFF")
        $(this).css("background", "rgb(207, 223, 243)")
        GRIDTREESTYLEID = $(this).parent().attr("id")
        if ($(this).children("span").attr("menuname") != undefined) {
            $("input[name='ClassifyId']").val($(this).children("span").attr("menuname"))
        }


        if ($("input[name='ClassifyId']").val() != "") {
            $("#config_").attr("data-toggle", "tab")
        }
    });

    $('input:radio[name="Permission"]').change(function (e) {
        var val = $(this).val();
        if (val == 1) {
            $("#Modifier").show();
        } else {
            $("#Modifier").hide();
        }
    });


    //修改人
    function Modifier() {
        if ($("input[name='PermissionPerson'][value=1]").is(":checked")) {
            $("#Modifier").show()
        } else {
            $("#Modifier").hide()
        }
    }



</script>
<script>


    var ColspanNub = $(".table.table-hover.table-bordered").find("tr").children("td").length
    window.ProdcetNode_EmptyHtml = '<tr><td colspan="' + ColspanNub + '"><p class="no-result">该产品暂无节点数据....</p></td></tr>';



    $("#DateStart").datepicker({
        format: "yyyy-mm-dd",
        language: 'cn',
        todayBtn: "linked",
        autoclose: true,
        todayHighlight: true,

    })


    $("#DateOver").datepicker({
        format: "yyyy-mm-dd",
        language: 'cn',
        todayBtn: "linked",
        autoclose: true,
        todayHighlight: true,

    })


    $('#menu_right').bootstrapValidator({
        fields: {
            Name: {
                validators: {
                    notEmpty: {
                        message: '模板名称不能为空'
                    },
                    regexp: {
                        regexp: /^[a-zA-Z0-9_ \u4e00-\u9fa5]+$/,
                        message: '模板名称不能输入符号'
                    },
                    stringLength: {
                        max: 25,
                        message: '模板名称最大长度为25',
                    }
                }
            },
            Code: {
                validators: {
                    notEmpty: {
                        message: '模板编号不能为空'
                    },
                    regexp: {
                        regexp: /^[a-z]$/,
                        message: '模板编号只能为正整数'
                    }
                }
            },
        }
    });

    $('#Node_form').bootstrapValidator({
        fields: {
            NodeName: {
                validators: {
                    notEmpty: {
                        message: '节点名称不能为空'
                    },
                }
            },
            Category: {
                validators: {
                    notEmpty: {
                        message: '节点类型不能为空'
                    },
                }
            },
            EnterTimes: {
                validators: {
                    notEmpty: {
                        message: '录入限制不能为空'
                    },
                }
            },
            IsH5: {
                validators: {
                    notEmpty: {
                        message: 'H5控制不能为空'
                    },
                }
            },
            Permission: {
                validators: {
                    notEmpty: {
                        message: '修改权限不能为空'
                    },
                }
            },
        }
    });

    //点击保存节点
    function NodeSave(value) {
        var bootstrapValidator = $('#Node_form').data('bootstrapValidator').validate();//触发全部验证
        if (bootstrapValidator.isValid()) {
            if ($('input[name="DisplayChe"]:checked').val() != undefined) {
                NodeConfig.Ajax_NodeSave(value)
            } else {
                $.L.msgError("必须添加至少一种内容！");
            }
        }
        else {
            $.L.msgError("请检查数据格式！");
        };
    }


    //点击添加内容
    $(".AddContentInp").on("click", function () {
        $(this).parents(".AddContent").toggleClass("green-500")
    })

    //完成编辑
    function CompleteEdit() {
        var a = 0;
        $("#SourceNodeRight").find("input[type='radio']").each(function () {
            if ($(this).context.checked) {
                a++
            }
        })

        var SelevtIndex = $("#SourceNodeRight").find("select").val()

        if (!$("#SourceNodeRight").find("input").val() == "") {
            if (SelevtIndex != "0") {
                if (a >= $("#SourceNodeRight").find("input[type='radio']").length / 2) {
                    var $AfterHtml = [
                       '<div class="SourceNodeLeftChild ">',
                       '<div class="border-buttom padding-10 ">',
                           '<span class="LeftChild1F padding-left-10 padding-right-10">1</span>',
                           '<input type="text" style="border:0" />',
                           '<span class="fr">',
                               '<i class="glyphicon glyphicon-edit" onclick="EditNodeToRight(this)"></i>&nbsp;',
                               '<i class="glyphicon glyphicon-remove" onclick="NodeMiniRemove(this)"></i>',
                           '</span>',
                       '</div>',
                       '<ul class="margin-left-10 margin-right-10">',
                           '<li class="border-buttom padding-10">',
                               '<span class="padding-right-20">节点名称</span>',
                               '<span style="color:#999999">' + $("#NodeName").val() + '+</span>',
                           '</li>',
                           '<li class="padding-10">',
                               '<span class="padding-right-20">节点类型</span>',
                               '<span>',
                                   '<a class="click_a color-999999">原料节点</a>&nbsp;',
                                   '<a class="click_a color-999999">录入限制</a>&nbsp;',
                                   '<a class="click_a color-999999">多次</a>',
                               '</span>',
                           '</li>',
                       '</ul>',
                   '</div>',
                    ].join("")
                    $("#SourceNodeLeft_").append($AfterHtml)
                    $(".SourceNodeLeftChild:last").find(".click_a").eq(parseInt(SelevtIndex) - 1).addClass("active")
                    $("#SourceNodeRight").hide()
                } else {
                    $.L.msgError("有单选项未选择")
                }
            } else {
                $.L.msgError("节点类型未选择")
            }
        } else {
            $.L.msgError("节点配置未填写")
        }
    }

    //删除
    function NodeMiniRemove(_this) {
        var result = confirm('是否删除！');
        if (result) {
            $(_this).parents(".SourceNodeLeftChild").remove()
        }

    }


    //修改人
    function Modifier() {
        if ($("input[name='PermissionPerson'][value=1]").is(":checked")) {
            $("#Modifier").show()
        } else {
            $("#Modifier").hide()
        }

    }
</script>




<script>
    //新添
    var menuname;

    $(document).on("click", ".GRIDTREESTYLE", function () {
        menuname = $(this).find("span").attr("menuname")
        //console.log(menuname)
    })





</script>